<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

let charts = ref();

onMounted(() => {
  initCharts();
});

const initCharts = () => {
  let myChart = echarts.init(charts.value);
  myChart.setOption({
    title: {
      text: "未来七天游客数量趋势",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: 18,
      },
      left: "center",
    },
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {
      splitLine: {
        show: false, //去除网格线
      },
      axisLine: {
        show: true,
      },
      axisTicks: {
        show: true, //显示刻度
      },
    },
    grid: {
      left: 50,
      top: 30,
      right: 30,
      bottom: 30,
    },
    tooltip: {
      trigger: "axis", //鼠标移入显示数据
    },
    series: [
      {
        data: [820, 1700, 200, 934, 1290, 3330, 1320],
        type: "line",
        smooth: true,
        emphasis: {
          focus: "series",
          scale: true,
        },

        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#7390cb", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
};

defineOptions({
  name: "Line",
});
</script>

<template>
  <div class="box5">
    <p>未来七天游客数量趋势</p>
    <img src="../../images/dataScreen-title.png" alt="" />
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style scoped lang="scss">
.box5 {
  width: 95%;
  height: 95%;
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: cover;
  margin: 0 80px 20px 20px;
  p {
    font-size: 18px;
    color: #fff;
  }

  .charts {
    height: calc(100% - 40px);
  }
}
</style>
